import React, { memo, useEffect, useState } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { DjRadioCategoryWrap } from "./style";
import DjRadioBanner from "../djRadioBanner";
import {
  getDjRadioRecommendType,
  getDjRadioHotLists,
} from "../store/actionType";
import { getSizeImage } from "@/utils/format-utils";
import Pagination from "@/components/pagination";
import { NavLink } from "react-router-dom";

export default memo(function DjRadioCategory(props) {
  const [pageNum, setPageNum] = useState(1);

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getDjRadioRecommendType(props.location.search.split("=")[1]));
    dispatch(
      getDjRadioHotLists(
        props.location.search.split("=")[1],
        30,
        (pageNum - 1) * 30
      )
    );
  }, [dispatch, props.location.search, pageNum]);

  useEffect(() => {
    setPageNum(1);
  }, [props.location.search]);

  const { djRadioNew, djHotRadiolists } = useSelector(
    (state) => ({
      djRadioNew: state.getIn(["djPlaylists", "djRadioRecommend"]),
      djHotRadiolists: state.getIn(["djPlaylists", "djRadioHotLists"]),
    }),
    shallowEqual
  );

  const changePage = (page, pageSize) => {
    setPageNum(page);
  };

  function NMusic() {
    return (
      <div className="n-nmusic">
        <h3 className="n-music-h3">
          <i className="u-music-h3-i"></i>
          暂无数据!
        </h3>
      </div>
    );
  }

  return (
    <DjRadioCategoryWrap>
      <div className="wh wrap-v2">
        <DjRadioBanner id={props.location.search.split("=")[1]} />
        <div className="new-radio-box">
          <div className="new-radio-text">
            <p>优秀新电台</p>
          </div>
        </div>
        <div className="new-radio-banners">
          {djRadioNew.length !== 0 ? (
            djRadioNew.djRadios.length !== 0 ? (
              djRadioNew.djRadios.slice(0, 5).map((item, index) => {
                return (
                  <div key={item.id} className="new-radio-banners-box fl">
                    <NavLink
                      to={{
                        pathname: "/djradio",
                        search: "?id=" + item.id,
                      }}
                    >
                      <img src={getSizeImage(item.picUrl, 150)} alt="" />
                    </NavLink>
                    <NavLink
                      to={{
                        pathname: "/djradio",
                        search: "?id=" + item.id,
                      }}
                      className="new-radio-banners-name"
                    >
                      {item.name}
                    </NavLink>
                    <span className="new-radio-banners-rcmdtext">
                      {item.rcmdtext}
                    </span>
                  </div>
                );
              })
            ) : (
              <NMusic />
            )
          ) : (
            ""
          )}
        </div>
        <div className="radio-ranking-box">
          <div className="radio-ranking-text">
            <p>电台排行榜</p>
            <div className="radio-ranking-checkbox">
              {/* <a   >上升最快</a>
                            <span>|</span> */}
              <a className="z-sel">最热电台</a>
            </div>
          </div>
          <div className="radio-ranking-hot-box">
            {djHotRadiolists !== undefined ? (
              djHotRadiolists.length !== 0 ? (
                djHotRadiolists.djRadios.length !== 0 ? (
                  djHotRadiolists.djRadios.slice(0, 30).map((item, index) => {
                    return (
                      <div key={item.id} className="radio-hot-box fl">
                        <NavLink
                          to={{
                            pathname: "/djradio",
                            search: "?id=" + item.id,
                          }}
                        >
                          <img
                            className="fl"
                            src={getSizeImage(item.picUrl, 120)}
                            alt=""
                          />
                        </NavLink>
                        <div className="radio-hot-text-box fl">
                          <NavLink
                            to={{
                              pathname: "/djradio",
                              search: "?id=" + item.id,
                            }}
                            className="ht-name"
                          >
                            {item.name}
                          </NavLink>
                          <div className="ht-nm">
                            <i className="icongr imgIcon fl"></i>
                            <NavLink
                              to={{
                                pathname: "/user/home",
                                search: "?id=" + item.dj.userId,
                              }}
                            >
                              {item.dj.nickname}
                            </NavLink>
                            <img
                              src={
                                item.dj.avatarDetail !== null
                                  ? getSizeImage(
                                      item.dj.avatarDetail.identityIconUrl,
                                      13
                                    )
                                  : ""
                              }
                              alt=""
                            />
                          </div>
                          <div className="ht-span">
                            <span>共{item.programCount}期</span>
                            <span>订阅{item.subCount}次</span>
                          </div>
                        </div>
                      </div>
                    );
                  })
                ) : (
                  <NMusic />
                )
              ) : (
                ""
              )
            ) : (
              ""
            )}
          </div>
        </div>
        <Pagination
          page={pageNum}
          size={20}
          getPage={changePage}
          total={djHotRadiolists ? djHotRadiolists.count : ""}
        />
      </div>
    </DjRadioCategoryWrap>
  );
});
